<template>
  <div class="visitor_statistics">

    <div class="tips">
      操作说明
      <a-tooltip placement="right">
        <template #title>
          <span>一天的独立访客中，首次访问您网站的访客记为新访客；再次访问记为老访
客。助您了解网站的访客构成以及不同渠道带来的访客情况，新老访客关注
的差异对比。
</span>
        </template>
        <span class="iconfont icon-hint1"></span>
      </a-tooltip>
    </div>
    <div class="selectSite">
      <getSite @handleChange="handleChange" ref="getSite_ref"></getSite>
    </div>
    <div class="visitDetail">
      <div class="visitDetail_header">

        <div class="timeSelect item">
          <!-- 所属时间模块部分 -->
          <commonDatePick :formData='formData' @select-type="selectType" @selectTimeChange="selectTimeChange" ref="commonDatePick_ref"></commonDatePick>
        </div>
        <div class="from item" v-if="isOpen">
          <span>来源：</span>
          <a-select v-model:value="formData.fromSectionValue" placeholder="请选择"
            :options="formData.fromSectionOption.map((item: any) => ({ value: item.value, label: item.label }))"
            @change="handleChange"></a-select>
        </div>
        <div class="area item" v-if="isOpen">
          <getArea @handleChange="handleChange" ref="getArea_ref">
          </getArea>
        </div>
        <div class="option-content">
          <!-- <a-button @click="resetOptions">重置</a-button> -->
          <!-- <a-button :style="{ 'margin-right': '8px' }" class="addButton" type="primary"
            @click="getNewOldVisitors()">搜索</a-button> -->
          <div class="openorclose" @click="() => isOpen = true" v-if="!isOpen">
            <a>展开</a>
            <i class="iconfont icon-down" style="font-size: 24px"> </i>

          </div>
          <div class="openorclose" @click="() => isOpen = false" v-if="isOpen">
            <a>收起</a>
            <i class="iconfont icon-up" style="font-size: 24px"> </i>
          </div>
        </div>
      </div>
      <div class="charts">
        <section class="map">
          <div class="halfCharts">
            <div id="newVisitor"></div>
            <div id="oldVisitor"></div>
          </div>
          <div class='visitor-wrap'>
            <div class="visitor">
              <div class="visitor-box">
                <p><span><strong></strong>浏览量</span><span>{{ visitorObj.newVisitorsDto.pvNum }}</span></p>
                <p><span><strong></strong>访客数</span><span>{{ visitorObj.newVisitorsDto.uvNum }}</span></p>
                <p><span><strong></strong>IP数</span><span>{{ visitorObj.newVisitorsDto.ipNum }}</span></p>
              </div>
              <div class="visitor-box">
                <p><span><strong></strong>跳出率</span><span v-if="visitorObj.newVisitorsDto.bounceRate">{{
                  visitorObj.newVisitorsDto.bounceRate +
                  '%' }}</span>
                </p>
                <p><span><strong></strong>平均访问时长</span><span>{{
                  transverterMss(visitorObj.newVisitorsDto.averageVisitLength) }}</span></p>
                <p><span><strong></strong>平均访问页数</span><span>{{ visitorObj.newVisitorsDto.averageVisitedPageNum }}</span>
                </p>
              </div>
            </div>
            <div class="visitor">
              <div class="visitor-box">
                <p><span><strong></strong>浏览量</span><span>{{ visitorObj.oldVisitorsDto.pvNum }}</span></p>
                <p><span><strong></strong>访客数</span><span>{{ visitorObj.oldVisitorsDto.uvNum }}</span></p>
                <p><span><strong></strong>IP数</span><span>{{ visitorObj.oldVisitorsDto.ipNum }}</span></p>
              </div>
              <div class="visitor-box">
                <p><span><strong></strong>跳出率</span><span v-if="visitorObj.oldVisitorsDto.bounceRate">{{
                  visitorObj.oldVisitorsDto.bounceRate + '%' }}</span>
                </p>
                <p><span><strong></strong>平均访问时长</span><span>{{
                  transverterMss(visitorObj.oldVisitorsDto.averageVisitLength) }}</span></p>
                <p><span><strong></strong>平均访问页数</span><span>{{ visitorObj.oldVisitorsDto.averageVisitedPageNum }}</span>
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onBeforeMount, onUnmounted, reactive, watch, computed } from "vue";
import request from "@/api/index";
import getters from "@/store/getters";
import { initEcharts } from "@/components/echarts/index";
import { optionpieHalfDonut } from "./echartType/options";
import commonDatePick from '../commonHeader/date.vue';
import getSite from '../commonHeader/getSite.vue';
import getArea from '../commonHeader/area.vue';
import { transverterMss } from '@/utils/common';
// type flowColumns
interface dataSourceType {
  [propName: string]: any;
}
//getters
const userInfo = getters.userInfo();
//data
const sectionValue = ref(userInfo.siteId);
const newVisitor = ref<dataSourceType>(JSON.parse(JSON.stringify(optionpieHalfDonut)));
const oldVisitor = ref<dataSourceType>(JSON.parse(JSON.stringify(optionpieHalfDonut)));
const visitorObj = ref<dataSourceType>({
  newVisitorsDto: {},
  oldVisitorsDto: {},
});

let Timer = ref<any>(null);
const getSite_ref = ref();
//表格展示

const commonDatePick_ref = ref();
let selectTimeRange = ref<(string | number)[]>([]); //选择时间范围
const isOpen = ref(false);


const formData = reactive<dataSourceType>({
  fromSectionValue: '', //来源
  fromSectionOption: [
    {
      label: '全部',
      value: ''
    }, {
      label: '搜索引擎',
      value: 1
    }, {
      label: '外部链接',
      value: 2
    }, {
      label: '直接访问',
      value: 3
    },
  ],
  selectTimeOption: 1,
  TimeOptions: [{
    label: '今天',
    value: 1
  }, {
    label: '昨天',
    value: 2
  }, {
    label: '最近7天',
    value: 3
  }, {
    label: '最近30天',
    value: 4
  }],
})
let selectAreaData = ref(null); // 选择区域
const getArea_ref = ref();


// computed
selectAreaData = computed(() => getArea_ref.value?.selectAreaData || null);

//methods
const handleChange = (value: any) => {//其他选择变化
  nextTick(() => {
    getNewOldVisitors();
  });
};
const selectTimeChange = () => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  getNewOldVisitors();
}
// 获取在线统计数据
const getNewOldVisitors = async () => {
  sectionValue.value = getSite_ref.value.sectionValue;
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  nextTick(async () => {
    let data: dataSourceType = {
      siteId: sectionValue.value,
      startTime: selectTimeRange.value[0],
      endTime: selectTimeRange.value[1],
      province: selectAreaData.value,
      sourceUrlType: formData.fromSectionValue
    }
    await request.getNewOldVisitors(data).then((res: dataSourceType) => {
      visitorObj.value = res;
      for (let key in visitorObj.value) {
        visitorObj.value[key].percentage = (visitorObj.value[key].percentage * 100).toFixed()
        visitorObj.value[key].bounceRate = (visitorObj.value[key].bounceRate * 100).toFixed()
        
      }
      
      newVisitor.value.series[0].data[0] = { value: res.newVisitorsDto.percentage, name: '新客户' };
      oldVisitor.value.series[0].data[0] = {
        value: res.oldVisitorsDto.percentage, name: '老客户'
      };
    });
    nextTick(() => {
      initEcharts('newVisitor', newVisitor.value);
      initEcharts('oldVisitor', oldVisitor.value);
    })
  })

}


//选择搜索项
const selectType = (item: dataSourceType, type: string) => {
  formData[type] = item.value;
  nextTick(() => {
    getNewOldVisitors();
  })
}



//onMounted

onMounted(() => {
  getNewOldVisitors();
  //initEcharts('timeOnline', dataSource.value);
});

</script>

<style lang="less" scoped>
.visitor_statistics {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background: #fff;
  overflow: auto;

  .tips {
    margin-bottom: 24px;
    font-size: 14px;
    color: #333;
  }

  .visitDetail {
    .visitDetail_header {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 90%;
      padding-top: 24px;

      .from {
        font-size: 14px;
        color: #333;
      }

      .timeSelect {
        margin-right: 24px;
      }

      .item {
        height: 40px;
        margin-right: 24px;
        margin-bottom: 24px;
      }

      .ant-select {
        width: 100px;
      }

      .option-content {
        position: absolute;
        right: -10%;
        display: flex;
        top: 18px;
        align-items: center;
        font-size: 14px;
      }
    }

    .charts {
      width: 100%;
      height: 500px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
    }

    .map {
      height: 540px;
      box-sizing: border-box;
      padding: 8px 24px;
      margin-bottom: 30px;

      .halfCharts {
        display: flex;
        margin: 8px 0 24px;
        height: 300px;

        #newVisitor,
        #oldVisitor {
          height: 300px;
          width: 50%;
        }
      }

      .circle {
        margin-left: -7.2%;
      }
    }

    .visitor-wrap {
      display: flex;
      justify-content: space-between;
    }

    .visitor {
      display: flex;
      justify-content: center;
      width: 50%;
    }

    .visitor-box {
      width: 250px;

      &:last-of-type {
        width: 350px;
      }

      &+.visitor-box {
        padding-left: 30px;
      }

      p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 20px;
        line-height: 45px;

        strong {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 10px;
          line-height: 45px;
        }

        span:nth-of-type(2) {
          font-size: 18px;
          font-weight: 600px;
        }
      }

    }

    .visitor-box:first-child {
      p:nth-child(1) {
        strong {
          background-color: #ED4A66;
        }
      }

      p:nth-child(2) {
        strong {
          background-color: #2593FC;
        }
      }

      p:nth-child(3) {
        strong {
          background-color: #F9CB34;
        }
      }
    }

    .visitor-box:last-child {
      p:nth-child(1) {
        strong {
          background-color: #1EBBBA;
        }
      }

      p:nth-child(2) {
        strong {
          background-color: #38C060;
        }
      }

      p:nth-child(3) {
        strong {
          background-color: #9669DF;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.visitDetail {
  .options {
    display: flex;
    align-items: center;
    font-size: 14px;

    .options_label {
      margin-right: 12px;
    }

    .options_content {
      margin-right: 12px;
      border: 1px solid var(--theme_button_bg_color, #1F6DED);
      display: flex;
      border-radius: 4px;

      span {
        padding: 4px 14px;
        color: #333;
        border-right: 1px solid var(--theme_button_bg_color, #1F6DED);
      }

      span:nth-last-of-type(1) {
        border-right: none;
      }

      span:hover {
        background: var(--theme_button_hover_bg_color, #4892fa);
        border-color: var(--theme_button_hover_bg_color, #4892fa);
        color: #fff;
      }

      .activeOption {
        color: #fff;
        background: var(--theme_button_bg_color, #1F6DED);
      }
    }
  }
}

.openorclose {
  display: flex;
  align-items: center;
}
</style>